<template>
  <!-- 分包预留页面 -->
  <view class="pageLayout" @click="clickItem">
    <view class="title">部门战略审批</view>
    <view class="list">
      <view class="cus_car" v-for="item in list" :key="item.approveID">
        <view class="cus_box"> 主题：{{ item.approveTopic }} </view>
        <view class="time">
          <view class="time_detail">发起时间：{{ item.startTime }}</view>
        </view>
        <view class="time">
          <view class="time_detail"
            >审批状态：{{ item.approveProcessStateDesc }}</view
          >
        </view>
      </view>
      <view class="more"  v-if="list.length <= 0">暂无数据</view>
      <view class="more"  v-if="list.length == 1">查看更多</view>
      <view class="lookMore" v-if="list.length >= 2">
        <view>
          <u-divider
            text="查看更多"
            textColor="#a22d27"
            lineColor="#a22d27"
          ></u-divider>
        </view>
      </view>
    </view>
  </view>
</template>
  
  <script>
export default {
  props: {
    list: {
      required: true,
      type: Array,
      default: () => [],
    },
  },

  components: {},
  data() {
    return {};
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  methods: {
    /**
     * 跳转
     * @param item 列表项
     */
    clickItem() {
      uni.navigateTo({ url: "/pagesA/approval/list" });
    },
  },
  onShow() {},
};
</script>
  <style lang="scss" scoped>
.pageLayout {
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 18rpx;
  margin-bottom: 20rpx;
}
.list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  .item {
    text-align: center;
    margin-bottom: 30rpx;
    margin: 0 30rpx 20rpx;
    .icon {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .text {
      font-size: 24rpx;
      color: #666666;
    }
  }
  .lookMore {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 24rpx;
    color: #666666;
    padding: 20rpx 0;
    height: 40%;
    background-image: linear-gradient(to bottom, #ffffff98, #ffffff);
    z-index: 999;
    line-height: 270rpx;
  }
}
.title {
  font-size: 28rpx;
  color: #333333;
  font-weight: bolder;
  margin-bottom: 25rpx;
}
.cus_car {
  background-color: #ffffff;
  width: 670rpx;
  padding: 20rpx;
  box-sizing: border-box;
  margin-bottom: 35rpx;
  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
  .top {
    display: flex;
    color: #1c1b2680;
    font-size: 24rpx;
    justify-content: flex-end;
  }
  .cus_box {
    font-weight: 700;
    color: #000000;
    font-size: 28rpx;
  }
  .time {
    display: flex;
    align-items: baseline;
    font-size: 26rpx;
    margin-top: 12rpx;
    .time_detail {
    }
  }
}
.more{
  width: 100%;
  text-align: center;
  color: #a22d27;
  display: flex;
  justify-content: center;
  font-size: 24rpx;
}
</style>